<template>
	<view class="warp" :selectable="false">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-20">

			<view class="u-flex-1">
				<view class="u-flex">
					<view class="u-font-16 u-p-b-20">{{vuex_user}}</view>
					<template v-if="vuex_loginStatus == 1">
						<!-- 当前为已登录状态 -->
						<view class="sex-icon u-p-b-20 u-m-l-10">
							<!-- 判断性别 -->
							<template v-if="vuex_userInfo.sex == 0">
								<u-image :src="woman" height="20px" width="20px"></u-image>
							</template>
							<template v-if="vuex_userInfo.sex == 1">
								<u-image :src="man" height="20px" width="20px"></u-image>
							</template>
						</view>
					</template>
				</view>
				<view v-if="vuex_loginStatus == 0">
					<!-- 当前为未登录状态 -->
					<u-button size="mini" :ripple="true" type="warning" @getuserinfo="registerOrLogin" open-type="getUserInfo">登录/注册</u-button>
				</view>
				<view v-else-if="vuex_loginStatus == 1">
					<!-- 当前为已登录状态 -->
					<view>{{vuex_userInfo.school}}{{vuex_userInfo.grade}}</view>
					<view class="u-font-14 u-tips-color">{{school}}</view>
				</view>
			</view>
			<view class="u-m-r-10">
				<template v-if="vuex_userInfo.imageUrl">
					<u-avatar :src="vuex_userInfo.imageUrl" size="120" bg-color="#eee"></u-avatar>
				</template>
				<template v-else>
					<u-avatar :src="defaultAvatar" size="120" bg-color="#eee"></u-avatar>
				</template>
			</view>

		</view>

		<view class="u-m-t-20 u-flex-col carry-task-center" :selectable="false">
			<view class="carry-header-title">
				任务中心
			</view>
			<view class="u-flex-1 carry-task-container u-flex">
				<view class="task-item" @click="openNewAndReturn('task-all')">
					<u-icon name="order" size="50"></u-icon>
					<view class="task-item-text">全部订单</view>
					<view class="red-point" v-if="vuex_taskInfo.total != 0 && vuex_taskInfo.total != undefined">
						{{vuex_taskInfo.total}}
					</view>
				</view>
				<view class="task-item" @click="openNewAndReturn('task-released')">
					<u-icon name="tags-fill" size="50"></u-icon>
					<view class="task-item-text">我发布的</view>
					<view class="red-point" v-if="vuex_taskInfo.total != 0 && vuex_taskInfo.total != undefined">
						{{vuex_taskInfo.publishCount}}
					</view>
				</view>
				<view class="task-item" @click="openNewAndReturn('task-accepted')">
					<u-icon name="man-add-fill" size="50"></u-icon>
					<view class="task-item-text">我接受的</view>
					<view class="red-point" v-if="vuex_taskInfo.total != 0 && vuex_taskInfo.total != undefined">
						{{vuex_taskInfo.workerCount}}
					</view>
				</view>
				<view class="task-item" @click="openNewAndReturn('task-cancel')">
					<u-icon name="close" size="50"></u-icon>
					<view class="task-item-text">已取消的</view>
				</view>
			</view>
		</view>

		<view class="u-m-t-20" :selectable="false">
			<u-cell-group>
				<u-cell-item icon="account" title="个人中心" @click="openNewAndReturn('personal')" :selectable="false"></u-cell-item>
				<u-cell-item icon="level" title="认证" @click="openNewAndReturn('certification')" :selectable="false"></u-cell-item>
				<u-cell-item icon="file-text" title="发布的动态" @click="openNewAndReturn('released')" :selectable="false"></u-cell-item>
				<u-cell-item icon="email" title="反馈" @click="openNewAndReturn('returns')" :selectable="false"></u-cell-item>
				<u-cell-item icon="info-circle" title="关于" @click="openNewAndReturn('about')" :selectable="false"></u-cell-item>
				<u-cell-item icon="zhuanfa" title="退出登录" color="#f7534f" @click="logout" :selectable="false"></u-cell-item>
			</u-cell-group>
		</view>

		<view>
			<!-- 打印请求信息 生产环境请注释 -->
			<!-- {{content}} -->
		</view>
		<u-tabbar :list="vuex_tabbar" :mid-button="true" @chang="vuex_onTabChange"></u-tabbar>
	</view>

</template>

<script>
	/*
	 * 作者: 臧锡洋
	 * 时间: 2020年10月29日 22:49:39
	 * 版本: V1
	 * 描述: 小程序Tab页面 - 我的
	 */
	export default {

		/* 下拉刷新 */
		onLoad: function(options) {

			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('开始下拉刷新');
			// 重新请求红点数据
			this.getRedPoint()

		},
		data() {
			return {
				defaultAvatar: require('../../static/carry-inner-icon/my_no_login_icon.png'),
				show: true,
				school: '',
				info: {
					encryptedData: '',
					iv: '',
					openId: ''
				},
				loginCode: '',
				man: require('../../static/carry-inner-icon/home-item/icon_sex_man.png'),
				woman: require('../../static/carry-inner-icon/home-item/icon_sex_woman.png'),
				content: '', // 测试信息,生产环境中请注释掉上方的view

			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 打开新的页面并可以返回
			 * @param {Object} functionName 传入String类型,通过功能名来跳转新的页面
			 */
			openNewAndReturn: function(functionName) {
				switch (functionName) {
					case 'personal':
						if (this.vuex_loginStatus == 0 || this.vuex_registerStatus == false) {
							// 当前没有注册
							this.showNoRegister() // 弹出提示
							return // 拦截
						}
						uni.navigateTo({
							url: '../functionPages/personal/personal'
						});
						break;
					case 'released':
						if (this.vuex_loginStatus == 0 || this.vuex_registerStatus == false) {
							// 当前没有注册
							this.showNoRegister() // 弹出提示
							return // 拦截
						}
						uni.navigateTo({
							url: '../functionPages/released/released'
						});
						break;
					case 'returns':
						if (this.vuex_loginStatus == 0 || this.vuex_registerStatus == false) {
							// 当前没有注册
							this.showNoRegister() // 弹出提示
							return // 拦截
						}
						uni.navigateTo({
							url: '../functionPages/returns/returns'
						});
						break;
					case 'about':
						uni.navigateTo({
							url: '../functionPages/about/about'
						});
						break;
					case 'task-all':
						if (this.vuex_loginStatus == 0 || this.vuex_registerStatus == false) {
							// 当前没有注册
							this.showNoRegister() // 弹出提示
							return // 拦截
						}
						uni.navigateTo({
							url: '../functionPages/task-center/task-center?current=0'
						});
						break;
					case 'task-released':
						if (this.vuex_loginStatus == 0 || this.vuex_registerStatus == false) {
							// 当前没有注册
							this.showNoRegister() // 弹出提示
							return // 拦截
						}
						uni.navigateTo({
							url: '../functionPages/task-center/task-center?current=1'
						});
						break;
					case 'task-accepted':
						if (this.vuex_loginStatus == 0 || this.vuex_registerStatus == false) {
							// 当前没有注册
							this.showNoRegister() // 弹出提示
							return // 拦截
						}
						uni.navigateTo({
							url: '../functionPages/task-center/task-center?current=2'
						});
						break;
					case 'task-cancel':
						if (this.vuex_loginStatus == 0 || this.vuex_registerStatus == false) {
							// 当前没有注册
							this.showNoRegister() // 弹出提示
							return // 拦截
						}
						uni.navigateTo({
							url: '../functionPages/task-center/task-center?current=3'
						});
						break;
					case 'certification':
						if (this.vuex_loginStatus == 0 || this.vuex_registerStatus == false) {
							// 当前没有注册
							this.showNoRegister() // 弹出提示
							return // 拦截
						}
						uni.navigateTo({
							url: '../functionPages/certification/certification'
						});
						break;
				}

			},
			logout: function() {
				console.log("退出登录被执行")
				// 请求登出接口
				this.$u.api.logout()
				//清除登录信息
				this.vuex_clearLoginInfo()
				// 清除红点信息
				this.$u.vuex('vuex_taskInfo.total', 0)
				this.$u.vuex('vuex_taskInfo.publishCount', 0)
				this.$u.vuex('vuex_taskInfo.workerCount', 0)
			},
			// 注册/登录 按钮被单击
			registerOrLogin(e) {
				// 处理登录逻辑
				// 获取用户开放信息
				console.log(JSON.stringify(e))
				if (e.detail.encryptedData) {
					this.info.encryptedData = e.detail.encryptedData
					this.info.iv = e.detail.iv
				}

				// 判断当前兼容性
				if (!swan.canIUse('getLoginCode')) {
					// 获取登录code
					swan.login({
						success: res => {
							console.log(res)
							this.loginCode = res.code
							this.content = JSON.stringify(res)
					
							// 请求登录接口
							this.$u.api.loginByCode(this.loginCode).then(res => {
								this.content = JSON.stringify(res)
								if (res.code == 1003) {
									// 该用户为首次登录
									// 取得openid
									this.info.openId = res.data
									//进行注册
									let param = {
					
									}
									this.content = "准备进行注册"
									this.$u.api.register({
										dy: this.info.encryptedData,
										iv: this.info.iv,
										openId: this.info.openId
									}).then(res => {
										this.content = JSON.stringify(res)
					
										this.$u.vuex('vuex_token', res.data.token) //设置token
										this.$u.vuex('vuex_loginStatus', 1) // 设置当前登录状态为已登录
										// 获取返回的一些必要信息
										this.$u.vuex('vuex_user', res.data.nikeName) //获取用户名
										this.$u.vuex('vuex_userInfo.sex', res.data.sex) //获取性别
										this.$u.vuex('vuex_userInfo.imageUrl', res.data.imageUrl) //获取头像地址
										this.$u.vuex('vuex_userInfo.userId', res.data.userId) //获取当前用户的id
										// 跳转到注册
										uni.redirectTo({
											url: '../functionPages/register/register'
										});
									}).catch(err => {
										this.content = JSON.stringify(err)
									})
								} else if (res.code == 1000) {
									// 此次登录不为首次登录
									this.$u.vuex('vuex_token', res.data.token) //设置token
									this.$u.vuex('vuex_loginStatus', 1) // 设置当前登录状态为已登录
									// 获取返回的一些必要信息
									this.$u.vuex('vuex_user', res.data.nikeName) //获取用户名
									this.$u.vuex('vuex_userInfo.sex', res.data.sex) //获取性别
									this.$u.vuex('vuex_userInfo.imageUrl', res.data.imageUrl) //获取头像地址
									this.$u.vuex('vuex_userInfo.school', res.data.school) //获取学校地址
									this.$u.vuex('vuex_userInfo.grade', res.data.grade + "级") //获取头像地址
									this.$u.vuex('vuex_userInfo.phone', res.data.phone) //获取手机
									this.$u.vuex('vuex_userInfo.userId', res.data.userId) //获取当前用户的id
									if (this.vuex_userInfo.phone == null) {
										// 当前手机为空 则说明为没有注册状态
										console.log("当前手机号是否为空:" + res.data.phone)
										this.$u.vuex('vuex_registerStatus', false)
									} else {
										console.log("当前手机号是否为空:" + res.data.phone)
										this.$u.vuex('vuex_registerStatus', true)
									}
									// 请求红点数据
									this.getRedPoint()
								}
							})
						},
						fail: err => {
							console.log('getLoginCode fail', err);
							this.content = JSON.stringify(err).toString()
						}
					});
					
					
				} else {
					// 当前能够使用getLoginCode
					
					// 获取登录code
					swan.getLoginCode({
						success: res => {

							console.log(res)
							this.loginCode = res.code
							this.content = JSON.stringify(res)

							// 请求登录接口
							this.$u.api.loginByCode(this.loginCode).then(res => {
								this.content = JSON.stringify(res)
								if (res.code == 1003) {
									// 该用户为首次登录
									// 取得openid
									this.info.openId = res.data
									//进行注册
									let param = {

									}
									this.content = "准备进行注册"
									this.$u.api.register({
										dy: this.info.encryptedData,
										iv: this.info.iv,
										openId: this.info.openId
									}).then(res => {
										this.content = JSON.stringify(res)

										this.$u.vuex('vuex_token', res.data.token) //设置token
										this.$u.vuex('vuex_loginStatus', 1) // 设置当前登录状态为已登录
										// 获取返回的一些必要信息
										this.$u.vuex('vuex_user', res.data.nikeName) //获取用户名
										this.$u.vuex('vuex_userInfo.sex', res.data.sex) //获取性别
										this.$u.vuex('vuex_userInfo.imageUrl', res.data.imageUrl) //获取头像地址
										this.$u.vuex('vuex_userInfo.userId', res.data.userId) //获取当前用户的id
										// 跳转到注册
										uni.redirectTo({
											url: '../functionPages/register/register'
										});
									}).catch(err => {
										this.content = JSON.stringify(err)
									})
								} else if (res.code == 1000) {
									// 此次登录不为首次登录
									this.$u.vuex('vuex_token', res.data.token) //设置token
									this.$u.vuex('vuex_loginStatus', 1) // 设置当前登录状态为已登录
									// 获取返回的一些必要信息
									this.$u.vuex('vuex_user', res.data.nikeName) //获取用户名
									this.$u.vuex('vuex_userInfo.sex', res.data.sex) //获取性别
									this.$u.vuex('vuex_userInfo.imageUrl', res.data.imageUrl) //获取头像地址
									this.$u.vuex('vuex_userInfo.school', res.data.school) //获取学校地址
									this.$u.vuex('vuex_userInfo.grade', res.data.grade + "级") //获取头像地址
									this.$u.vuex('vuex_userInfo.phone', res.data.phone) //获取手机
									this.$u.vuex('vuex_userInfo.userId', res.data.userId) //获取当前用户的id
									if (this.vuex_userInfo.phone == null) {
										// 当前手机为空 则说明为没有注册状态
										console.log("当前手机号是否为空:" + res.data.phone)
										this.$u.vuex('vuex_registerStatus', false)
									} else {
										console.log("当前手机号是否为空:" + res.data.phone)
										this.$u.vuex('vuex_registerStatus', true)
									}
									// 请求红点数据
									this.getRedPoint()
								}
							})
						},
						fail: err => {
							console.log('getLoginCode fail', err);
							this.content = JSON.stringify(err).toString()
						}
					});
				}






			},
			/**
			 * 请求红点数据并赋值
			 */
			getRedPoint() {
				this.$u.api.getTaskCount().then(res => {
					console.log(res.data.total)

					this.$u.vuex('vuex_taskInfo.total', res.data.total)
					this.$u.vuex('vuex_taskInfo.publishCount', res.data.publishCount)
					this.$u.vuex('vuex_taskInfo.workerCount', res.data.workerCount)

					uni.stopPullDownRefresh()
				})
			},
			showNoRegister() {
				if (this.vuex_loginStatus == 0) {
					//当前没有登录
					uni.showModal({
						title: "警告",
						content: "您当前没有登录,请登录后重试!",
						showCancel: false,
					})
				} else if (this.vuex_loginStatus == 1) {
					uni.showModal({
						title: "警告",
						content: "您当前没有完善个人信息,请前往完善!",
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: "../functionPages/register/register" // 到完善信息界面
							})
						}
					})
				}
			}
		},

		mounted() {
			// 请求红点
			this.getRedPoint()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.user-box {
		background-color: #fff;
	}


	.carry-task-center {
		margin: 0 15px;
		background-image: linear-gradient(to right, #2d2b3e, #393736, #151515);
		color: #fff;
		border-radius: 5px;
		user-select: none !important;

		.carry-header-title {
			font-size: 14px;
			padding: 10px 8px;
			border-bottom: 1px solid #6d6d6d;
		}

		.carry-task-container {
			font-size: 12px;
			justify-content: space-around;

			.task-item {
				display: flex;
				position: relative;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #eee;
				letter-spacing: 1px;
				padding: 8px 8px;

				.task-item-text {
					margin-top: 4px;
				}

				&:active {
					background-color: rgba($color: #686868, $alpha: 0.8);
				}

				/* 红点提示 */
				.red-point {
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					top: 5rpx;
					right: 10rpx;
					width: 30rpx;
					height: 30rpx;
					border-radius: 100px;
					background-color: #d20000;
					color: #eee;
					font-size: 15rpx;
				}
			}
		}


	}
</style>
